<template>
    <view class="paotuiitem item">
        <view class="orderInfo flexbox" @click="toLink('order')">
            <view class="flex_l flexbox order_title">
                <view :class="`otype ${objInfo.type == 1 ? 'buy' : ''}` ">{{ objInfo.type == 1 ? '帮我买' : '取送件' }}</view>
                <view class="title">{{ objInfo.shop }}</view>
            </view>
            <view :class="`orderState state${objInfo.state}`">{{ stateText }}</view>
        </view>
        <view class="orderAddr" @click="toLink('order')">
            <view class="mapShow" v-if="['4','5'].includes(objInfo.state) || (objInfo.state == 3 && objInfo.form == 0)"  ref="mapCon" :id="`map${objInfo.id}`" >
                <map style="width: 100%; height: 100%;" :id="`${objInfo.id}`" :scale="14" :markers="mapConfig && mapConfig.cover" :longitude="mapConfig.from_lng || mapConfig.to_lng" :latitude="mapConfig.from_lat || mapConfig.to_lat" :polyline="mapConfig && mapConfig.polyline" v-if="platForm != 'web'"></map>
            </view>
            <view class="addrDetail" v-else>
                <view class="from flexbox">
                    <view class="lab">{{ objInfo.type == 1 ? '买' : '取' }}</view>
                    <view class="addr">
                        <view class="address">{{ objInfo.buyaddress || 'null' }}</view>
                        <template v-if="objInfo.type != 1">
                            <view class="contact">{{ objInfo.username || 'null' }} {{ objInfo.tel || 'null' }}</view>
                        </template>
                    </view>
                </view>
                <view class="to flexbox">
                    <view class="lab">收</view>
                    <view class="addr">
                        <view class="address">{{ objInfo.address || 'null' }}</view>
                        <view class="contact">{{ objInfo.getperson || 'null' }} {{ objInfo.gettel || 'null' }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="orderBtns flexbox">
            <view class="l_info">
                <view class="payAmount flexbox" v-if="objInfo.state == '0'">需支付<view class="amount">{{ globalData.appConfig && globalData.appConfig.currency && globalData.appConfig.currency.symbol || '￥'  }}<text>{{ objInfo.amount }}</text></view></view>
                <view class="paytime flexbox" v-else>{{  timeTrans(objInfo.pubdate) }}</view>
            </view>
            <view class="r_btns flexbox">
                <template v-if="['0','2','3','4','5'].includes(objInfo.state) ">
                    <view class="btn cancel" @click="cancleOrder">取消订单</view>
                    <view class="btn pay" v-if="objInfo.state == '0'" @click="payOrder">立即支付</view>
                    <view class="btn qishou" v-if="objInfo.state == '5'" @click="toLink('contact')">联系骑手</view>
                </template>
                <template v-else-if="objInfo.state == '1'">
                    <view class="btn rebuy" @click="toLink('rebuy')">再来一单</view>
                    <view class="btn comment borderBtn" @click="toLink('comment')">去评价</view>
                </template>
                <template v-else-if="objInfo.state == '6'">
                    <view class="btn rebuy" @click="toLink('rebuy')">重新下单</view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    const app = getApp();
    var map;
    export default {
         props:{
            objInfo:{
                type:Object,
                default:{
                    
                }
            },
            ind:{
                type:Number,
                default:0
            }
        },
        data(){
            return{
                platForm:app.globalData.platForm, //平台
                globalData:app.globalData,
                stateText:'',
                mapConfig:{},
                lnglat:'',
            }
        },
        computed:{
            getState(){
                return function(order){
                    const that = this;
                    let stateText = '';
                    let state = order.state
                    switch(state){
                        case  '0': 
                            stateText = '待付款'
                            break;
                        case  '1': 
                            if(order.iscomment){
                                stateText = '已完成'
                            }else{
                                stateText = '订单已送达'    
                            }
                            break;
                        case  '2': 
                            stateText = '待确认'
                            break;
                        case  '3': 
                            stateText = '等待接单';
                            break;
                        case  '4': 
                            stateText = '已接单'
                            break;
                        case  '5': 
                            stateText = '配送中'
                            break;
                        case  '6': 
                            stateText = '已取消'
                            break;
                        case  '7': 
                            stateText = '交易失败'
                            break;
                    }

                    return stateText
                }
            },

            // 时间戳转换
            timeTrans(){
                return function(timestr){

                    const dateFormatter = app.dateFormatter(timestr);
                    const year = dateFormatter.year;
                    const month = dateFormatter.month;
                    const day = dateFormatter.day;
                    const hour = dateFormatter.hour;
                    const minute = dateFormatter.minute;
                    const second = dateFormatter.second;
                    
                    let today_dateFormatter = app.dateFormatter(parseInt(new Date().valueOf() / 1000));
                    const today_year = today_dateFormatter.year;
                    const today_month = today_dateFormatter.month;
                    let showStr = '';
                    if(year == today_year){
                        showStr = month + '/' + day + ' ' + hour + ':' + minute ;
                    }else{
                        showStr = year + '/' + month + '/' + day + ' ' + hour + ':' + minute ;

                    }
                    return showStr
                }
            },
        },
        mounted(){
            this.initData()
        },

        methods:{
            // 处理数据
            initData(){
                const that = this;
                let state = that.objInfo.state,ortype = that.objInfo.type,obuyfrom = that.objInfo.obuyfrom,xdTime = that.objInfo.gettime;
                let polyline = {},cover = [],arr = [];
                let sCont = '';

                let stateText = '';
                    switch(state){
                        case  '0': 
                            stateText = '待付款'
                            break;
                        case  '1': 
                            if(that.objInfo.iscomment){
                                stateText = '已完成'
                            }else{
                                stateText = '订单已送达'    
                            }
                            break;
                        case  '2': 
                            stateText = '待确认'
                            break;
                        case  '3': 
                            stateText = '等待接单';
                            that.mapConfig = {
                                from_lng:that.objInfo.buylng,
                                from_lat:that.objInfo.buylat,
                                from_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/'+ (that.objInfo.type == 1 ? "buyIcon":"quIcon") +'.png',
                                to_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/shouIcon.png',
                                to_lng:that.objInfo.lng,
                                to_lat:that.objInfo.lat,
                                cover:[{
                                    id:new Date().valueOf(),
                                    latitude: (that.objInfo.buylat),
                                    longitude: (that.objInfo.buylng),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/'+ (that.objInfo.type == 1 ? "buyIcon":"quIcon") +'.png',
                                    width:26,
                                    height:37,
                                    
                                },{
                                    id:new Date().valueOf() + 1,
                                    latitude: (that.objInfo.lat),
                                    longitude: (that.objInfo.lng),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/shouIcon.png',
                                    width:26,
                                    height:37,
                                    callout:{
                                        content:`预计${that.objInfo.gettime}送达`,
                                        color:'#000',
                                        fontSize:14,
                                        borderRadius:4,
                                        bgColor:'#fff',
                                        padding:8,
                                        display:'ALWAYS'
                                    }
                                    
                                }]
                            }
                            break;
                        case  '4': 
                            stateText = '已接单';
                            if(ortype ==1){//帮我买
                                if(obuyfrom == 1){//就近购买
                                    sCont = '骑手正在附近为您购买商品';
                                }else{
                                    sCont = '骑手正赶往商店采购';
                                }

                            }else{//取送
                                sCont = '骑手正赶往取货地址'
                            }
                            
                            if(that.objInfo.buylng || that.objInfo.buylat){
                                arr.push({latitude:  (that.objInfo.buylat), longitude:  (that.objInfo.buylng)})
                                cover.push({
                                    id:new Date().valueOf() + 1,
                                    latitude: (that.objInfo.buylat),
                                    longitude: (that.objInfo.buylng),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/'+ (that.objInfo.type == 1 ? "buyIcon":"quIcon") +'.png',
                                    width:26,
                                    height:37,
                                })
                            }
                            
                            if(that.objInfo.lng || that.objInfo.lat){
                                arr.push({latitude: (that.objInfo.lat), longitude: (that.objInfo.lng)})
                                cover.push({
                                    id:new Date().valueOf() + 3,
                                    latitude: (that.objInfo.lat),
                                    longitude: (that.objInfo.lng),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/shouIcon.png',
                                    width:26,
                                    height:37,
                                   
                                })
                            }
                             let callout = sCont ? {
                                    content:sCont,
                                    color:'#000',
                                    fontSize:14,
                                    borderRadius:4,
                                    bgColor:'#fff',
                                    padding:8,
                                    display:'ALWAYS'
                                } : {}
                            if(that.objInfo.pslng || that.objInfo.pslat){
                                arr.push({latitude: that.objInfo.pslat, longitude: that.objInfo.pslng})
                                cover.push({
                                    id:new Date().valueOf() + 2,
                                    longitude: (that.objInfo.pslng),
                                    latitude: (that.objInfo.pslat),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/qsIcon.png',
                                    width:50,
                                    height:50,
                                    callout:callout,
                                })
                            }
                            polyline = {
                                points:arr,
                                color:'#307CFC',
                                width:4,
                            }
                            
                            that.mapConfig = {
                                from_lng:that.objInfo.buylng,
                                from_lat:that.objInfo.buylat,
                                from_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/'+ (that.objInfo.type == 1 ? "buyIcon":"quIcon") +'.png',
                                to_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/shouIcon.png',
                                qs_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/qsIcon.png',
                                to_lng:that.objInfo.lng,
                                to_lat:that.objInfo.lat,
                                cover:cover,
                                polyline:[polyline],
                            }
                            break;
                        case  '5': 
                            stateText = '配送中'
                            if(ortype ==1){//帮我买
                                sCont = '商品已购买，预计'+xdTime+'送达';
                            }else{//取送
                                sCont = '骑手正在配送，预计'+xdTime+'送达';
                            }
                            if(that.objInfo.buylng || that.objInfo.buylat){
                                arr.push({latitude:  Number(that.objInfo.buylat), longitude:  Number(that.objInfo.buylng)})
                                cover.push({
                                    id:new Date().valueOf() + 1,
                                    latitude: (that.objInfo.buylat),
                                    longitude: (that.objInfo.buylng),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/'+ (that.objInfo.type == 1 ? "buyIcon":"quIcon") +'.png',
                                    width:26,
                                    height:37,
                                })
                            }
                            
                            if(that.objInfo.lng || that.objInfo.lat){
                                arr.push({latitude: (that.objInfo.lat), longitude: Number(that.objInfo.lng)})
                                cover.push({
                                    id:new Date().valueOf() + 3,
                                    latitude: (that.objInfo.lat),
                                    longitude: (that.objInfo.lng),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/shouIcon.png',
                                    width:26,
                                    height:37,
                                    
                                })
                            }
                            if(that.objInfo.pslng || that.objInfo.pslat){
                                arr.push({latitude: that.objInfo.pslat, longitude: that.objInfo.pslng})
                                let callout = sCont ? {
                                        content:sCont,
                                        color:'#000',
                                        fontSize:14,
                                        borderRadius:4,
                                        bgColor:'#fff',
                                        padding:8,
                                        display:'ALWAYS'
                                    } : {}
                                cover.push({
                                    id:new Date().valueOf() + 2,
                                    latitude: Number(that.objInfo.pslat),
                                    longitude: Number(that.objInfo.pslat),
                                    iconPath:app.globalData.masterDomain + '/templates/member/touch/images/paotui/qsIcon.png',
                                    width:50,
                                    height:50,
                                    callout:callout
                                })
                            }
                            polyline = {
                                points:arr,
                                color:'#307CFC',
                                width:4,
                            }
                            
                            that.mapConfig = {
                                from_lng:that.objInfo.buylng,
                                from_lat:that.objInfo.buylat,
                                from_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/'+ (that.objInfo.type == 1 ? "buyIcon":"quIcon") +'.png',
                                to_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/shouIcon.png',
                                qs_icon:app.globalData.masterDomain + '/templates/member/touch/images/paotui/qsIcon.png',
                                to_lng:that.objInfo.lng,
                                to_lat:that.objInfo.lat,
                                cover:cover,
                                polyline:[polyline],
                            }

                            break;
                        case  '6': 
                            stateText = '已取消'
                            break;
                        case  '7': 
                            stateText = '交易失败'
                            break;
                    }
                that.stateText = stateText
                if(that.platForm == 'web' && ['4','5'].includes(that.objInfo.state) || (that.objInfo.state == 3 && that.objInfo.form == 0) && (that.mapConfig.from_lng || that.mapConfig.from_lat || that.mapConfig.to_lng || that.mapConfig.to_lat ) ){
                    let shop =  {"lng":that.mapConfig.from_lng,"lat":that.mapConfig.from_lat};
                    var ps = {"lng":that.objInfo.pslng,"lat":that.objInfo.pslat};
                    var user = {"lng":that.mapConfig.to_lng,"lat":that.mapConfig.to_lat};
                    var id = that.objInfo.id,
                        type = that.objInfo.type,
                        buyform = that.objInfo.buyform,
                        totime = that.objInfo.totime,
                        ostate = that.objInfo.state;
                    that.$nextTick(() => {
                        that.mapShow(shop,ps,user,id,type,ostate,buyform,totime)
                    })
                }
            },

            // 取消订单
            cancleOrder(){
                uni.$emit('cancelorder',{objInfo:this.objInfo,ind:this.ind})
            },

            // 继续支付
            payOrder(){
                uni.$emit('payorder',{objInfo:this.objInfo,ind:this.ind})
            },

            // 跳转链接
            toLink(type){
                const that = this;
                let url = '';
                if(type == 'order'){
                    url = `${app.globalData.appConfig.cfg_user_index}/orderdetail-paotui-${this.objInfo.id}.html`;
                    app.linkTo(url,false,false)
                }else if(type == 'rebuy'){
                    if(that.objInfo.type == 1){
                        url = `${app.globalData.masterDomain}/waimai/paotui-buy.html?rebuy=${that.objInfo.id}`

                    }else{
                        url = `${app.globalData.masterDomain}/waimai/paotui-song.html?rebuy=${that.objInfo.id}`

                    }
                    app.linkTo(url,false,false)
                }else if(type == 'comment'){
                    url = `${app.globalData.appConfig.cfg_user_index}/write-comment-paotui-${that.objInfo.id}.html`
                    app.linkTo(url,false,false)
                }else if(type == 'contact'){
                    if(app.globalData.appBoolean && app.globalData.platForm == 'web'){
                        window.location.href = 'tel:' + that.objInfo.psphone
                    }else{
                        uni.makePhoneCall({
                            phoneNumber: that.objInfo.psphone //仅为示例
                        });
                    }
                }
            },

            // 绘制地图
            /**x 店铺 y 配送员 z 收货 ortype 帮我买/取送货 ostate状态 obuyfrom 指定地址购买/骑手就近购买 ttime 送达时间
             * 
             * **/
            mapShow(x, y, z, id, ortype, ostate, obuyfrom, ttime) {
                const that = this
                var sCont = '', xdTime;
                xdTime = ttime;

                if (ostate == 4) {//取货中
                    if (ortype == 1) {//帮我买
                        if (obuyfrom == 1) {//就近购买
                            sCont = '骑手正在附近为您购买商品';
                        } else {
                            sCont = '骑手正赶往商店采购';
                        }

                    } else {//取送
                        sCont = '骑手正赶往取货地址'
                    }

                } else {//配送中

                    if (ortype == 1) {//帮我买
                        sCont = '商品已购买，预计' + xdTime + '送达';
                    } else {//取送
                        sCont = '骑手正在配送，预计' + xdTime + '送达';
                    }
                }

                var mapPath;
                if (site_map == "baidu") {
                    mapPath = new BMap.Map('map' + id);
                    var labelStyle = {
                        color: "#fff",
                        borderWidth: "0",
                        padding: "0",
                        zIndex: "2",
                        backgroundColor: "transparent",
                        textAlign: "center",
                        fontFamily: '"Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "微软雅黑", "Segoe UI", Tahoma, "宋体b8bf53", SimSun, sans-serif'
                    }


                    var usCont = '', shopIcon, courier;
                    var user = new BMap.Point(z.lng, z.lat);  //收货坐标
                    if (ostate == 3) {//等待接单
                        usCont = '预计' + xdTime + '送达';

                    } else {
                        courier = new BMap.Point(y.lng, y.lat);  //骑手坐标
                    }
                    var pContent = usCont ? '<p style="position: absolute;height:27px;box-shadow:0px 0px 6px #ccc;border-radius:13px;line-height: 27px;padding: 0 16px;top: -37px;left: 50%;transform: translateX(-50%);font-size: 12px;font-weight: bold;color: #000;background: #fff;display: inline-block;white-space: nowrap;z-index: 8">' + usCont + '<span style="position:absolute;left:50%;overflow:hidden;pointer-events:none;-webkit-transform:rotate(45deg);-mz-transform:rotate(45deg);transform:rotate(45deg);width: 9px;height: 9px;margin-left: -4px;background:#fff;box-shadow:none;bottom: -4px;"></span></p>' : ''
                    var userIcon = new BMap.Label('<div class="bubble person" style="width: 26px; height: 37px; background: url('+ that.mapConfig.to_icon +') no-repeat center/cover; position: relative;">'+ pContent +'</div>', {
                        position: user,
                        offset: new BMap.Size(-15, -33),
                    });
                    userIcon.setStyle(labelStyle);

                    mapPath.addOverlay(userIcon);
                    var centerPoint = new BMap.Point(z.lng, z.lat);
                    //画中心点
                    // if(ostate == 3){//无骑手时中心点为用户
                    // 	centerPoint = new BMap.Point(z.lng, z.lat);
                    // }
                    mapPath.centerAndZoom(centerPoint, 14);

                    //开始划线
                    var riding1 = new BMap.RidingRoute(mapPath, {
                        renderOptions: {
                            map: mapPath,
                            autoViewport: true

                        },
                        onPolylinesSet: function (Route) {
                            //当线条添加完成时调用
                            for (var i = 0; i < Route.length; i++) {
                                var polyline = Route[i].getPolyline();//获取线条遮挡物
                                polyline.setStrokeColor("#307CFC");//设置颜色
                                polyline.setStrokeWeight(3);//设置宽度
                                polyline.setStrokeOpacity(1);//设置透明度
                            }
                        },
                        onMarkersSet: function (routes) {
                            for (var i = 0; i < routes.length; i++) {
                                // 判断是否是途经点
                                if (typeof (routes[i].Km) == "undefined") {
                                    mapPath.removeOverlay(routes[i].marker); //删除起始默认图标
                                }
                            }
                        }
                    });
                    //开始划线
                    var riding2 = new BMap.RidingRoute(mapPath, {
                        renderOptions: {
                            map: mapPath,
                            autoViewport: true

                        },
                        onPolylinesSet: function (Route) {
                            //当线条添加完成时调用
                            for (var i = 0; i < Route.length; i++) {
                                var polyline = Route[i].getPolyline();//获取线条遮挡物
                                polyline.setStrokeColor("#307CFC");//设置颜色
                                polyline.setStrokeWeight(3);//设置宽度
                                polyline.setStrokeOpacity(1);//设置透明度
                            }
                        },
                        onMarkersSet: function (routes) {
                            for (var i = 0; i < routes.length; i++) {
                                // 判断是否是途经点
                                if (typeof (routes[i].Km) == "undefined") {
                                    mapPath.removeOverlay(routes[i].marker); //删除起始默认图标
                                }
                            }
                        }
                    });


                    if ((ortype == 2) || (ortype == 1 && obuyfrom == 0)) {//取送货/帮我买去指定地址购买
                        var shop = new BMap.Point(x.lng, x.lat);  //取货坐标
                        if (ortype == 2) {//取送货
                            shopIcon = new BMap.Label('<div class="bubble shop" style="width: 26px; height: 37px; background: url('+ that.mapConfig.from_icon +') no-repeat center/cover; position: relative;"></div>', {
                                position: shop,
                                offset: new BMap.Size(-15, -33),
                            });
                        } else {
                            shopIcon = new BMap.Label('<div class="bubble buy" style="width: 26px; height: 37px; background: url('+ that.mapConfig.from_icon +') no-repeat center/cover; position: relative;"></div>', {
                                position: shop,
                                offset: new BMap.Size(-15, -33),
                            });
                        }
                        shopIcon.setStyle(labelStyle);
                        mapPath.addOverlay(shopIcon);
                        if (ostate == 3) {//只画取送货路线
                            riding1.search(shop, user);  //店铺~顾客
                        } else {//配送中 --加上骑手 两条线

                            riding1.search(shop, courier);  //店铺~骑手
                            riding2.search(courier, user);  //骑手~顾客

                        }

                    }

                    if ((ortype == 1 && obuyfrom == 1) && ostate == 5) {//骑手就近购买好商品 配送中
                        riding2.search(courier, user);  //骑手~顾客
                    }

                    if (ostate == 4 || ostate == 5) {
                        var pContent = sCont ? '<p style="position: absolute;height:27px;box-shadow:0px 0px 6px #ccc;border-radius:13px;line-height: 27px;padding: 0 16px;top: -37px;left: 50%;transform: translateX(-50%);font-size: 12px;font-weight: bold;color: #000;background: #fff;display: inline-block;white-space: nowrap;z-index: 8">' + sCont + '<span style="position:absolute;left:50%;overflow:hidden;pointer-events:none;-webkit-transform:rotate(45deg);-mz-transform:rotate(45deg);transform:rotate(45deg);width: 9px;height: 9px;margin-left: -4px;background:#fff;box-shadow:none;bottom: -4px;"></span></p>' : ''
                        var bubbleLabel = new BMap.Label('<div class="bubble courier"  style="width: 50px; height: 50px; background: url('+ that.mapConfig.qs_icon +') no-repeat center/cover; position: relative;">'+ pContent +'</div>', {
                            position: courier,
                            offset: new BMap.Size(-25, -35)
                        });
                        //画骑手坐标
                        bubbleLabel.setStyle(labelStyle);
                        bubbleLabel.zIndex = 4;
                        mapPath.addOverlay(bubbleLabel);
                    }





                } else if (site_map == 'amap') {
                    var routeLine; //高德地图专用
                    var centerP = [z.lng, z.lat];
                    if (ortype == 1 && ostate == 4 && obuyfrom == 1) {//骑手就近购买商品--中心点为骑手
                        centerP = [y.lng, y.lat];
                    }
                    // console.log(centerP);
                    // console.log(id)
                    // 初始化地图
                    mapPath = new AMap.Map('map' + id, {
                        center: centerP,
                        zoom: 14
                    });
                    var usCont = '';
                    if (ostate == 3) {
                        usCont = '预计' + xdTime + '送达';
                    }
                    var pContent = usCont ? '<p style="position: absolute;height:27px;box-shadow:0px 0px 6px #ccc;border-radius:13px;line-height: 27px;padding: 0 16px;top: -37px;left: 50%;transform: translateX(-50%);font-size: 12px;font-weight: bold;color: #000;background: #fff;display: inline-block;white-space: nowrap;z-index: 8">' + usCont + '<span style="position:absolute;left:50%;overflow:hidden;pointer-events:none;-webkit-transform:rotate(45deg);-mz-transform:rotate(45deg);transform:rotate(45deg);width: 9px;height: 9px;margin-left: -4px;background:#fff;box-shadow:none;bottom: -4px;"></span></p>' : ''
                    userIcon = new AMap.Marker({
                        position: [z.lng, z.lat],
                        content: '<div class="bubble person" style="width: 26px; height: 37px; background: url('+ that.mapConfig.to_icon +') no-repeat center/cover; position: relative;">'+ pContent +'</div>',
                        offset: new AMap.Pixel(-15, -33),
                        map: mapPath
                    });
                    if (ostate == 4 || ostate == 5) {
                        var spContent = sCont ? '<p style="position: absolute;height:27px;box-shadow:0px 0px 6px #ccc;border-radius:13px;line-height: 27px;padding: 0 16px;top: -37px;left: 50%;transform: translateX(-50%);font-size: 12px;font-weight: bold;color: #000;background: #fff;display: inline-block;white-space: nowrap;z-index: 8">' + sCont + '<span style="position:absolute;left:50%;overflow:hidden;pointer-events:none;-webkit-transform:rotate(45deg);-mz-transform:rotate(45deg);transform:rotate(45deg);width: 9px;height: 9px;margin-left: -4px;background:#fff;box-shadow:none;bottom: -4px;"></span></p>' : ''
                        qsIcon = new AMap.Marker({
                            position: [y.lng, y.lat],
                            content: '<div class="bubble courier" style="width: 50px; height: 50px; background: url('+ that.mapConfig.qs_icon +') no-repeat center/cover; position: relative;">'+ spContent +'</div>',
                            offset: new AMap.Pixel(-15, -33),
                            map: mapPath
                        });
                    }
                    var ridingOption = {
                        policy: 1
                    }
                    var riding1 = new AMap.Riding(ridingOption);
                    var riding2 = new AMap.Riding(ridingOption);
                    //绘制取货地点/指定地址购买点
                    if ((ortype == 2) || (ortype == 1 && obuyfrom == 0)) {//取送货/帮我买去指定地址购买
                        if (ortype == 1) {
                            shopIcon = new AMap.Marker({
                                position: [x.lng, x.lat],
                                content: '<div class="bubble buy"  style="width: 26px; height: 37px; background: url('+ that.mapConfig.from_icon +') no-repeat center/cover; position: relative;"></div>',
                                offset: new AMap.Pixel(-15, -33),
                                map: mapPath
                            });
                        } else {
                            shopIcon = new AMap.Marker({
                                position: [x.lng, x.lat],
                                content: '<div class="bubble shop" style="width: 26px; height: 37px; background: url('+ that.mapConfig.from_icon +') no-repeat center/cover; position: relative;></div>',
                                offset: new AMap.Pixel(-15, -33),
                                map: mapPath
                            });
                        }
                        if (ostate == 3) {//只画取送货路线
                            riding1.search([x.lng, x.lat], [z.lng, z.lat], function (status, result) {
                                if (status === 'complete') {
                                    if (result.routes && result.routes.length) {
                                        drawRoute("1", result.routes[0], mapPath)
                                        // log.success('绘制骑行路线完成')
                                    }
                                }
                            });

                        } else {//配送中 --加上骑手 两条线
                            riding1.search([x.lng, x.lat], [y.lng, y.lat], function (status, result) {
                                if (status === 'complete') {
                                    if (result.routes && result.routes.length) {
                                        drawRoute("1", result.routes[0], mapPath)
                                        // log.success('绘制骑行路线完成')
                                    }
                                }
                            });

                            riding2.search([y.lng, y.lat], [z.lng, z.lat], function (status, result) {
                                if (status === 'complete') {
                                    if (result.routes && result.routes.length) {
                                        drawRoute("1", result.routes[0], mapPath)
                                        // log.success('绘制骑行路线完成')
                                    }
                                }
                            });
                        }
                    }


                    if ((ortype == 1 && obuyfrom == 1) && ostate == 5) {//骑手就近购买好商品 配送中
                        riding1.search([y.lng, y.lat], [z.lng, z.lat], function (status, result) {
                            if (status === 'complete') {
                                if (result.routes && result.routes.length) {
                                    drawRoute("1", result.routes[0], mapPath)
                                    // log.success('绘制骑行路线完成')
                                }
                            }
                        });
                    }



                } else if (site_map == 'google') {
                    var directionsService, directionsRenderer, directionsService1, directionsRenderer1;
                    var infoWindow = new google.maps.InfoWindow;
                    var centerPoint = new google.maps.LatLng(parseFloat(z.lat), parseFloat(z.lng));
                    if (ortype == 1 && ostate == 4 && obuyfrom == 1) {//骑手就近购买商品--中心点为骑手
                        centerPoint = new google.maps.LatLng(parseFloat(y.lat), parseFloat(y.lng));
                    }
                    // 初始化地图
                    mapPath = new google.maps.Map(document.getElementById('map' + id), {
                        zoom: 14,
                        center: centerPoint,
                        zoomControl: true,
                        mapTypeControl: false,
                        streetViewControl: false,
                        zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.SMALL
                        }
                    });
                    var uposition = new google.maps.LatLng(parseFloat(z.lat), parseFloat(z.lng));
                    userIcon = new MarkerWithLabel({
                        position: uposition,
                        draggable: true,
                        map: mapPath,
                        labelAnchor: new google.maps.Point(15, 33),
                        labelContent: '<div class="bubble person" style="width: 26px; height: 37px; background: url('+ that.mapConfig.to_icon +') no-repeat center/cover; position: relative;"></div>',
                        icon: '/static/images/blank.gif',
                    });

                    if (ostate == 3) {
                       
                        var infowincontent = ' <p style="position: absolute;height:27px;box-shadow:0px 0px 6px #ccc;border-radius:13px;line-height: 27px;padding: 0 16px;top: -37px;left: 50%;transform: translateX(-50%);font-size: 12px;font-weight: bold;color: #000;background: #fff;display: inline-block;white-space: nowrap;z-index: 8">预计' + xdTime + '送达<span style="position:absolute;left:50%;overflow:hidden;pointer-events:none;-webkit-transform:rotate(45deg);-mz-transform:rotate(45deg);transform:rotate(45deg);width: 9px;height: 9px;margin-left: -4px;background:#fff;box-shadow:none;bottom: -4px;"></span></p>';
                        infoWindow.setContent(infowincontent);
                        infoWindow.open(mapPath, userIcon);
                    }

                    directionsService = new google.maps.DirectionsService();
                    directionsRenderer = new google.maps.DirectionsRenderer({
                        suppressMarkers: true,
                    });
                    directionsRenderer.setOptions({
                        polylineOptions: {
                            strokeColor: '#027CFF'
                        }
                    });
                    directionsRenderer.setMap(mapPath);
                    var qlnglat, slnglat, ulnglat;
                    if (ostate == 4 || ostate == 5) {
                        qlnglat = { "lng": Number(y.lng), "lat": Number(y.lat) }; //骑手坐标
                        var qposition = new google.maps.LatLng(parseFloat(y.lat), parseFloat(y.lng));
                        qsIcon = new MarkerWithLabel({
                            position: qposition,
                            draggable: true,
                            map: mapPath,
                            labelAnchor: new google.maps.Point(24, 40),
                            labelContent: '<div class="bubble courier" style="width: 50px; height: 50px; background: url('+ that.mapConfig.qs_icon +') no-repeat center/cover; position: relative;"></div>',
                            icon: '/static/images/blank.gif',
                        });
                        infoWindow.setContent(sCont);
                        infoWindow.open(mapPath, qsIcon);
                    }
                    ulnglat = { "lng": Number(z.lng), "lat": Number(z.lat) }; //收货坐标
                    //绘制取货地点/指定地址购买点
                    if ((ortype == 2) || (ortype == 1 && obuyfrom == 0)) {//取送货/帮我买去指定地址购买
                        slnglat = { "lng": Number(x.lng), "lat": Number(x.lat) }; //取货坐标

                        var sposition = new google.maps.LatLng(parseFloat(x.lat), parseFloat(x.lng));
                        shopIcon = new MarkerWithLabel({
                            position: sposition,
                            draggable: true,
                            map: mapPath,
                            labelAnchor: new google.maps.Point(15, 33),
                            labelContent: '<div class="bubble shop" style="width: 26px; height: 37px; background: url('+ that.mapConfig.from_icon +') no-repeat center/cover; position: relative;></div>',
                            icon: '/static/images/blank.gif',
                        });

                        if (ostate == 3) {//只画取送货路线
                            calculateAndDisplayRoute(directionsService, directionsRenderer, slnglat, ulnglat);
                        } else {//配送中 --加上骑手 两条线
                            directionsService1 = new google.maps.DirectionsService();
                            directionsRenderer1 = new google.maps.DirectionsRenderer({
                                suppressMarkers: true,
                            });
                            directionsRenderer1.setOptions({
                                polylineOptions: {
                                    strokeColor: '#027CFF'
                                }
                            });
                            directionsRenderer1.setMap(mapPath);
                            calculateAndDisplayRoute(directionsService, directionsRenderer, slnglat, qlnglat);
                            calculateAndDisplayRoute(directionsService1, directionsRenderer1, qlnglat, ulnglat);
                        }

                    }

                    if ((ortype == 1 && obuyfrom == 1) && ostate == 5) {//骑手就近购买好商品 配送中
                        calculateAndDisplayRoute(directionsService, directionsRenderer, qlnglat, ulnglat);
                    }


                }
            }
        }
    }
</script>

<style scoped>
    
    @import './orderlist_paotui.css';
</style>